<template>
  <BaseDialog
    ref="baseDialog"
    width="80%"
    title="命令控制"
    @confrim="confrim"
    :hideFooter="true"
  >
    <h2>IMEI:{{ imei }}</h2>
    <div class="container">
      <div class="col">
        <TgCmd ref="TgCmd" @handleSearch="handleSearch"></TgCmd>
      </div>
      <div class="col">
        <JixieCmd ref="JixieCmd"></JixieCmd>
      </div>
      <div class="col">
        <GcCmd ref="GcCmd"></GcCmd>
      </div>
      <div class="col">
        <div class="rows">
          <el-button
            type="primary"
            icon="el-icon-setting"
            style="padding: 11px 20px"
            @click="handleSearch"
            >发送状态查询命令</el-button
          >
        </div>
        <div class="rows">
          <el-select v-model="reset" size="default">
            <el-option label="整机复位" :value="0"> </el-option>
            <el-option label="XY复位" :value="1"> </el-option>
            <el-option label="效果复位" :value="2"> </el-option>
          </el-select>
          <br />
          <el-button
            type="primary"
            icon="el-icon-setting"
            style="padding: 11px 20px; margin-top: 10px"
            @click="handleRest"
            >发送复位命令</el-button
          >
        </div>
      </div>
    </div>
  </BaseDialog>
</template>

<script>
import { Message } from "element-ui";
import TgCmd from "./cmd-tg.vue";
import JixieCmd from "./cmd-jx.vue";
import GcCmd from "./cmd-gc.vue";
import { getDeviceInfo, sendrestcmd, sendSearchcmd } from "@/api/device";
export default {
  components: {
    TgCmd,
    JixieCmd,
    GcCmd,
  },
  data() {
    return {
      reset: null,
      imei: "",
    };
  },
  methods: {
    async open(data, cmds) {
      this.imei = data.imei;
      this.$refs.baseDialog.open();
      const res = await getDeviceInfo({ imei: data.imei });
      if (res.content) {
        this.$nextTick(() => {
          this.$refs.TgCmd.open(res, cmds);
          this.$refs.JixieCmd.open(res);
          this.$refs.GcCmd.open(res,data);
        });
      } else {
        this.$nextTick(() => {
          this.$refs.TgCmd.open({ imei: data.imei }, cmds);
          this.$refs.JixieCmd.open({ imei: data.imei });
          this.$refs.GcCmd.open({ imei: data.imei });
        });
      }
    },
    confrim() {
      this.close();
    },
    close() {
      this.$refs.baseDialog.close();
    },
    async handleSearch() {
      const res = await sendSearchcmd({ imei: this.imei });
      if (!res.status) {
        Message.success("发送成功");
      }
    },
    async handleRest() {
      const res = await sendrestcmd({ imei: this.imei, reset: this.reset });
      if (!res.status) {
        Message.success("发送复位命令成功");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  overflow: hidden;
  .col {
    width: 100%;
    padding: 10px;
    border-right: 1px solid #ccc;
    max-height: 600px;
    overflow-y: auto;
    .rows {
      margin-bottom: 25px;
      border-bottom: 1px dotted #03619c;
      padding-bottom: 10px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
